
<script>

    import {onMount} from "svelte";
    import {writable} from "svelte/store";
    import Alert from './Alter.svelte';


    let isxiugaishow = writable(false);
    
    let isaddshow = writable(false);
    isxiugaishow.set(false);
    isaddshow.set(false);
    var students = [];
    let username = ""; 
    let studentid = '';
    let addcoursename = "";
    var credit = 0;
    onMount(async ()=>{
        username = localStorage.getItem("username");
        const response = await fetch("/api/student",{
            method:"PATCH",
            headers:{
                "Content-Type":"application/json"
            },
            body:JSON.stringify({
                username:username
            })
        });
        if(response.ok){
            students = await response.json();
            credit = students[1].credit;
            studentid = students[1].id
        }
    })


    function xiugai(){
        isxiugaishow.set(true);
    }


    function xhanderClick(){
    isxiugaishow.set(false);
    isaddshow.set(false);
  }

  function addCourse(){
    const request = {
      studentid : studentid,
      studentname:username,
      coursename:addcoursename,
    }
     fetch("/api/addstuCourse",{
      method:"PATCH",
      headers:{
        "Content-Type":"application/json"
      },
      body:JSON.stringify(request)
    })
    .then((response)=>response.json())
    .then((data)=>{
      console.log("接收到的响应是",data);
      if (data.error == "success"){
        students = data.data;
        credit = students[1].credit;
        alert("选课成功！");
      }
      else if(data.error == "failed"){
        triggerAlert();
      }
    })
  }


  let showAlert = false;
  let alertMessage = "查无此课程，请您重新确实一下课程名称！";
  let alertDuration = 3000;

  function triggerAlert() {
    showAlert = true;
    setTimeout(() => {
      showAlert = false;
    }, alertDuration);
  }

</script>


<ul>
    <p>学生选修信息如下：</p>
    <button value="add" on:click={xiugai} >修改个人信息</button>
    <button value="xiugai" on:click={(()=>{isaddshow.set(true)})}>选修新的课程</button>
    {#each students as student}
      <li on:canplay={()=>{credit = student.AllCredit}}>
        <div>
          <b>学号： {student.id}</b>
          <b>学生姓名： {student.studentname}</b>
          <b>课程号： {student.crouseid}</b>
          <b>课程名： {student.coursename}</b>
          <b>成绩： {student.grade}</b>
          <button class="mybutton" id={student.studentname} value={student.id} >修改</button>
          <button class="mybutton" value="delete" >删除</button>
        </div>
      </li>
    {/each}
    <b>本学期所修的总学分为：{credit}</b>
  </ul>


  <div class="modal" style="display:{$isxiugaishow ? 'block' : 'none'}">
    <div class="弹窗1" style="display:{$isxiugaishow ? 'block' : 'none'}">
        <h1>修改{username}个人信息</h1>
        <button class="xbutton" on:click={xhanderClick}>&times</button>
        <span class="inline-block-element">
            <b >原密码</b>
            <input  class="inline-block-element" placeholder="原密码" type="text"  required/>
        </span>
        <span class="inline-block-element">
            <b >新密码</b>
            <input  placeholder="新密码" type="text" >
        </span>
        <span class="inline-block-element">
            <b >姓名</b>
            <input  class="inline-block-element" placeholder="姓名" type="text"  required/>
        </span>
        <span class="inline-block-element">
            <b >性别</b>
            <input  class="inline-block-element" placeholder="性别" type="text"  required/>
        </span>
        <span class="inline-block-element">
            <b >年龄</b>
            <input  class="inline-block-element" placeholder="年龄" type="text"  required/>
        </span>
       
        <button class="mybutton" >确定</button>
        <button class="mybutton" >取消</button>
    
    </div>
    </div>

    <div class="modal" style="display:{$isaddshow ? 'block' : 'none'}">
      <div class="container">
        {#if showAlert}
          <Alert {alertMessage} {alertDuration} />
        {/if}
      </div>
        <div class="弹窗" style="display:{$isaddshow ? 'block' : 'none'}">
 
            <h1>选修课程</h1>
            <button class="xbutton" on:click={xhanderClick}>&times</button>
            <span class="inline-block-element">
                <b>选修课程名称</b>
                <input  class="inline-block-element" placeholder="课程名称"  bind:value={addcoursename} type="text"  required/>
            </span>
            <button class="mybutton" on:click={addCourse}>确定</button>
            <button class="mybutton" on:click={xhanderClick}>取消</button>
        
        </div>
        </div>



        



  <style>

.container {
    padding: 2em;
  }
    .modal {
      display: none; /* 在开始时隐藏 modal */
      position: fixed; /* 在全屏下保持定位 */
      z-index: 1; /* 坐落在其他内容上方 */
      left: 0;
      top: 0;
      width: 100%; /* 完整的宽度 */
      height: 100%; /* 完整的高度 */
      overflow: auto; /* 需要时启用滚动条 */
      background-color: rgb(0,0,0); /* 遮罩层背景色 */
      background-color: rgba(0,0,0,0.4); /* 可以添加透明度效果 */
    }
    
    .inline-block-element {
            display: flex;
            align-items: center;
        }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
    
      li {
        border: 1px solid #ccc;
        margin: 10px 0;
        padding: 20px;
      }
    
      li:nth-of-type(4n+1) {
        background-color: #FAF0E6;
      }
    
      li:nth-of-type(4n+2) {
        background-color: #FFF0F5;
      }
    
      li:nth-of-type(4n+3) {
        background-color: #F0FFF0;
      }
    
      li:nth-of-type(4n) {
        background-color: #F0F8FF;
      }
    
      li > div {
        display: flex;
        justify-content: space-around;
      }
    
      .mybutton {
        flex-shrink: 0;  
        margin: 0 15px;  
        padding: 10px 20px;  
        background-color: #38a1db;
        color: #ffffff;
        border: 1px solid #38a1db;
        cursor: pointer;
        transition: .4s;
      }
      .button-container {
        display: flex;
        gap: 500px; /* 设置按钮之间的间隔距离 */
      }
    
      p
      {
        font-size: 10px;
          font-weight: bold;
          text-align: center;
          padding: 20px;
          background-color: #007bff;
          color: #fff;
      }
      .弹窗 input {
          margin-bottom: 10px;
          padding: 5px;
          width: 100%;
          border: 1px solid #ccc;
          border-radius: 4px;
          color: black;
        }
    
      .mybutton:hover {
        background-color: #ffffff;
        color: #38a1db;
      }
    
      .弹窗{
        border: none;
        display:flex;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        width:30%;
        height: 300px;
        background: lightblue;
        position: fixed;
        padding: 40px 40px;
        left:36%;
        top:30%;
        border-radius: 10px;
        border: none;
      }
      .弹窗1{
        border: none;
        display:flex;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        width:40%;
        height: 400px;
        background: lightblue;
        position: fixed;
        padding: 40px 40px;
        left:36%;
        top:30%;
        border-radius: 10px;
        border: none;
      }
       .xbutton{
        position: absolute;
        top: 0; 
        right: 19px; 
        margin: -15px -10px 0 auto;
        width: 20px;
        height: 40px;
        font-size: 30px;
        background: none;
        border: none;
        cursor: pointer;
      }

    
    
    
    </style>